<template id='index'>
    <div class="index">
        <div class="pc">
            <div class="pcContent">
                <div class="top">
                    <p>{{ static.title }}</p>
                    <p>{{ static.title2 }}</p>
                </div>
                <div class="startBtn btn phoneBtn" v-dc="getStart">Get Started</div>
                <div class="center">
                    <p>{{ static.desc }}</p>
                    <p>{{ static.desc2 }}</p>
                </div>
                <div class="startBtn btn" v-dc="getStart">Get Started</div>
            </div>
        </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
    name: '',
    components: {
    },
    // 定义属性
    data() {
        return {
            static: {
                title: "For more than 2000 years, intellectuals are known to carry with themselves a little handbook that contains their thoughts, wisdom and quotations. ",
                title2: "It is refered to as an Enchiridion",
                desc: "And now, Enchi.io is created with a mind for more than that.",
                desc2: "e you can start your own enchiridion by writing down your thoughts, importing highlights and quotations from e- readers, clipping web content and have everything managed with ease.",
            }

        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        getStart() {
            this.$router.push({
                path: "register",
            })
        },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.index {
    .pc {
        background: url("~@/assets/images/index/pc/bg.jpg");
        background-size: 100% 100%;
        max-width: 1440px;
        height: 927px;
        background-color: rgba(52, 52, 52, 0.36);

        .pcContent {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;

            .top {
                margin-top: 151px;
                width: 691px;
                height: 222px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                font-size: 30px;
                line-height: 1.2;
                color: @tColor;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
            }

            .center {
                font-size: 18px;
                width: 762px;
                height: 75px;
                color: #dadada;
                line-height: 1.2;
                margin-top: 52px;
            }

            .startBtn {
                margin-top: 54px;
            }

            .phoneBtn {
                display: none;
            }
        }

    }
}

@media screen and (max-width: 900px) {
    .index {
        .pc {
            .pcContent {

                .top,
                .center {
                    width: 70%;
                }

                .startBtn {
                    margin-top: 90px;
                }
            }
        }
    }
}

@media screen and (max-width: 780px) {
    .index {
        .pc {
            height: 963px;

            .pcContent {
                .top {
                    height: inherit;
                    line-height: 1.3;

                    p:last-child {
                        margin-top: 10px;
                    }
                }

                .center {
                    height: inherit;
                    line-height: 1.5;
                }
            }

        }


    }
}

//手机样式
@media screen and (max-width: 650px) {
    .index {
        .pc {

            .pcContent {
                padding: 0 20px;

                .top {
                    width: 100%;
                    margin-top: 36px;
                    min-height: 300px;

                    p {
                        margin-top: 0px !important;
                        font-size: 24px;
                        line-height: 1.5;
                    }
                }

                .center {
                    margin-top: 80px;
                    width: 100%;
                    min-height: 177px;
                    font-size: 16px;
                    line-height: 1.5;
                }

                .startBtn {
                    display: none;
                }

                .phoneBtn {
                    margin-top: 80px;
                    display: flex;
                }
            }
        }
    }

}
</style>